<template>
	<div class="check-task">
		<div>
			<!-- 图片 -->
			<div class="upload-hd">
				<div class="imgs mr-10" v-for="(item, index) in fileList" :key="index">
					<img class="upload-img" :src="baseUrl + item" />
					<div class="delImg" @click="DelImg(index)">
						<img src="@/assets/Images/AppIcon//icon_cancel.png" />
					</div>
				</div>
				<van-uploader
					v-if="fileList.length < 3"
					@oversize="onOversize"
					:after-read="afterRead"
				>
					<img
						class="upload-img"
						src="@/assets/Images/AppIcon/upload_picture.png"
						alt=""
					/>
				</van-uploader>
			</div>
			<div class="up-part">
				<div>
					<div>
						<van-field
							class="input_text"
							label="隐患区域"
							readonly
							input-align="right"
						>
							<template #input>
								<div
									style="display: flex; color: #1296db"
									v-if="!data.IsAssignedArea"
									@click="_goHiddenDangerArea()"
								>
									<img
										src="@/assets/Images/AppIcon/icon_danger_select.png"
										alt=""
										style="height: 20px; width: 20px"
									/>
									选择隐患区域
								</div>
							</template>
						</van-field>
					</div>
					<van-field
						v-model="data.HiddenDangerArea"
						:readonly="data.IsAssignedArea || !data.DangerCustomArea"
					/>
				</div>
				<div>
					<div>
						<van-field
							class="input_text"
							label="隐患描述"
							required
							input-align="right"
						>
							<template #input>
								<div></div>
							</template>
						</van-field>
					</div>
					<van-field
						v-model="data.HiddenDangerDesc"
						rows="3"
						autosize
						type="textarea"
					/>
				</div>
				<!-- <div v-if="data.OriginType == 2">
        <div>
          <van-field class="input_text" label="整改建议" input-align="right">
            <template #input>
              <div></div>
            </template>
          </van-field>
        </div>
        <van-field
          v-model="data.CorrectiveAdvise"
          rows="3"
          autosize
          type="textarea"
        />
        <div class="warning">{{data.GistSource}}</div>
      </div> -->
				<div>
					<van-field
						v-model="data.CorrectiveAdvise"
						rows="3"
						autosize
						type="textarea"
					/>
					<div v-if="data.GistSource" class="warning gist-source">
						依据来源：{{ data.GistSource }}
					</div>
				</div>
			</div>
			<template v-if="roles.indexOf('admin') != -1">
				<div class="down-part">
					<van-field
						class="input_text"
						v-model="data.LGDName"
						label="隐患分类"
						placeholder="请选择"
						required
						readonly
						@click="_goDangerType()"
					>
						<template #right-icon><van-icon name="arrow" /></template>
					</van-field>
					<!-- 单选框 -->
					<van-field class="input_text" name="radio" label="严重度" required>
						<template #input>
							<van-radio-group
								v-model="data.HiddenDangerType"
								direction="horizontal"
							>
								<van-radio name="1" style="margin: 0 10px 10px 0"
									>一般隐患</van-radio
								>

								<van-radio name="2" style="margin: 0 10px 10px 0"
									>重大隐患</van-radio
								>
							</van-radio-group>
						</template>
					</van-field>

					<van-field
						class="input_text"
						v-if="data.CorrectiveChnName"
						:value="data.CorrectiveDeptName + '-' + data.CorrectiveChnName"
						label="整改部门/人"
						placeholder="请选择"
						required
						readonly
						@click="_goCheckTaskPeople()"
					>
						<template #right-icon><van-icon name="arrow" /></template>
					</van-field>
					<van-field
						v-else
						class="input_text"
						:value="data.CorrectiveDeptName"
						label="整改部门/人"
						placeholder="请选择"
						required
						readonly
						@click="_goCheckTaskPeople()"
					>
						<template #right-icon><van-icon name="arrow" /></template>
					</van-field>
					<!-- 日期 Date-->

					<van-field
						readonly
						:required="data.IsMustSubCorrectiveDate"
						class="input_text"
						name="calendar"
						v-model="data.CorrectiveDate"
						label="整改期限"
						placeholder="点击选择日期"
						@click="openCalendar()"
					>
						<template #right-icon>
							<van-icon name="arrow" />
						</template>
					</van-field>
					<!-- 快捷选择 -->
					<van-field class="input_text" label=" " label-width="100">
						<template #input>
							<div>
								快捷选择：<span class="week" @click="getOneWeek()">一周</span
								><span class="ml-10 week" @click="getTwoWeek()">两周</span
								><span class="ml-10 week" @click="getOneMounth()">一个月</span>
							</div>
						</template>
					</van-field>
				</div>
			</template>
			<van-calendar  color="#1989fa"  v-model="showCalendar" @confirm="onConfirm" />
			<template v-if="roles.indexOf('admin') != -1">
				<div class="bottom-btns">
					<van-button
						class="submit-btn"
						type="primary"
						@click="save(false, 'close')"
					>
						暂存并关闭
					</van-button>
					<van-button
						type="info"
						class="submit-btn"
						@click="save(false, 'info')"
					>
						暂存并继续
					</van-button>
				</div>
				<div class="bottom-btns">
					<van-button type="warning" class="delete-btn" @click="save(true)">
						提交至整改部门/人
					</van-button>
				</div>
			</template>
			<template v-else>
				<div class="bottom-btns">
					<van-button type="warning" class="delete-btn" @click="save(true)">
						提交至管理员
					</van-button>
				</div>
			</template>
		</div>
		<!-- 隐患区域 -->
		<van-popup
			v-model="showPopup"
			closeable
			round
			position="bottom"
			:style="{ height: '80%' }"
		>
			<div class="popup-title"></div>
			<div class="popup-content">
				<DangerArea @cb="_chooseDangerArea" />
			</div>
		</van-popup>
		<!-- 隐患分类 -->
		<van-popup
			v-model="DangerTypeShow"
			closeable
			round
			position="bottom"
			:style="{ height: '80%' }"
		>
			<div class="popup-title"></div>
			<div class="popup-content">
				<DangerType @DangerTypeCb="_chooseDangerType" />
			</div>
		</van-popup>
		<!-- 部门，人 -->
		<van-popup
			v-model="DepartmentTypeShow"
			closeable
			round
			position="bottom"
			:style="{ height: '80%' }"
		>
			<div class="popup-title"></div>
			<div class="popup-content">
				<Department @DepartmentCb="_chooseDepartment" />
			</div>
		</van-popup>

		<!-- 检查依据 -->
		<van-popup
			v-model="ClassifysShow"
			closeable
			round
			position="bottom"
			:style="{ height: '80%' }"
		>
			<div class="popup-title"></div>
			<div class="popup-content">
				<Classifys @ClassifysCb="_chooseClassifys" :isShow="isShow" />
			</div>
		</van-popup>
	</div>
</template>

<script>
import { initNewEntity, SnapShotAdd } from '@/api/sytech/sytechDangerCheckTaskDetail'
import { mapGetters } from 'vuex'
import { formatDate, getDate, getTime } from '@/utils/getDate'
import { upload } from '@/api/common'
import { Dialog } from 'vant'
import { deepClone, getCaption } from '@/utils'
import DangerArea from '@/components/DangerArea/DangerArea.vue'
import Classifys from '@/components/Classifys/Classifys.vue'
import DangerType from '@/components/DangerType/DangerType.vue'
import Department from '@/components/Department/Department.vue'

export default {
	components: {
		DangerArea,
		DangerType,
		Department,
		Classifys,
	},
	data() {
		return {
			data: { OriginType: 3 },
			uploader: [{ url: 'https://img.yzcdn.cn/vant/leaf.jpg' }],
			showCalendar: false,
			idx: '',
			show: false,
			showChooseTask: false,
			id: '',
			activeIcon: require('@/assets/Images/AppIcon/item_check_transparent.png'),
			fileList: [],
			showPopup: false,
			DangerTypeShow: false,
			DepartmentTypeShow: false,
			ClassifysShow: false,
			isShow: false,
		}
	},
	computed: {
		...mapGetters(['baseUrl', 'CompanyCode', 'roles']),
	},
	created() {
		// console.log('created', this.$route.params)
		if (this.$route.query.ctCode) {
			this.ctCode = this.$route.query.ctCode || ''
			this.OriginType = this.$route.query.OriginType || ''
		}
		this.initNewEntity()
		
	},
	activated() {
		
	},

	
	watch: {
		//监测变化
		isShow(val) {
			if (this.isShow == false) {
				//添加一个历史记录
				history.pushState(null, null, window.location.href)
			}
		},
	},
	mounted() {
		//添加一个历史记录
		history.pushState(null, null, window.location.href)
		window.addEventListener('popstate', this.exit_dialog)
	},
	destroyed() {
		//销毁该事件
		window.removeEventListener('popstate', this.exit_dialog)
	},
	methods: {
		exit_dialog() {
			//关闭弹窗
			this.isShow = false
		},
		// 上传图片
		afterRead(file) {
			let params = new FormData() //创建form对象
			params.append('file', file.file)
			upload(params)
				.then((res) => {
					res.data.forEach((item) => {
						this.fileList.push(item.FilePath)
					})
				})
				.catch((err) => {
					console.log('err', err)
				})
		},
		onOversize(file) {
			Toast('文件大小不能超过 2M')
		},
		// 删除图片
		DelImg(idx) {
			const _this = this
			_this.$dialog
				.confirm({
					title: '询问',
					message: '确定要删除此照片吗？',
				})
				.then(() => {
					_this.fileList.splice(idx, 1)
				})
				.catch(() => {
					// on cancel
				})
		},

		// 计划详情
		initNewEntity() {
			const param = {
				id: 0,
				ctCode: this.ctCode,
				OriginType: this.OriginType,
			}
			initNewEntity(param).then((res) => {
				console.log(res.data, 'res.data')
				this.data = res.data
				this.data.HiddenDangerType = '1'
				if (this.$route.params.fileList) {
					this.fileList = this.$route.params.fileList.split(';')
					console.log(this.fileList, 'this.fileList')
				}
				if (this.$route.params.vobj) {
					this.data.CorrectiveAdvise = this.$route.params.vobj.CorrectiveAdvise
					this.data.HiddenDangerDesc = this.$route.params.vobj.HiddenDangerDesc
					this.data.OriginType = 2
					this.data.LGDName = this.$route.params.vobj.DName
					this.data.LGDCode = this.$route.params.vobj.DCode
					this.data.OriginalText = this.$route.params.vobj.OriginalText
					this.data.GistSource = this.$route.params.vobj.GistSource
					this.data.LGCode = this.$route.params.vobj.LGCode
					this.data.LegalLiability = this.$route.params.vobj.LegalLiability
					this.data.HiddenDangerAreaType = this.$route.params.vobj.HiddenDangerType
					this.data.LGDType = this.$route.params.vobj.DType
				}
				if(this.$route.query.areaCode)
				{
					this.data.HiddenDangerAreaCode=this.$route.query.areaCode;
					this.data.IsAssignedArea=true;
				}
				if(this.$route.query.areaName)
				{
					this.data.HiddenDangerArea=this.$route.query.areaName;
				}
				if(this.$route.query.areaType)
				{
					this.data.HiddenDangerAreaType=this.$route.query.areaType;
				}
				if(this.$route.query.areaNo)
				{
					this.data.HiddenDangerAreaNo=this.$route.query.areaNo;
				}
			})
		},
		// 打开日历
		openCalendar() {
			this.showCalendar = true
		},
		onConfirm(date) {
			const dateTime = formatDate(date)
			this.data.CorrectiveDate = getDate(dateTime)
			this.showCalendar = false
		},
		// 选择计划重复
		_chooseTask() {
			this.showChooseTask = true
		},
		closeChooseTask(type) {
			if (type) {
				this.data.CheckFrequencies.forEach((item) => {
					if (item.ID == type) {
						this.data.CheckFrequencyName = item.Name
					}
				})
			}
			this.showChooseTask = false
		},
		// 点击保存
		save(Confirm, info) {
			if (info) {
				if (this.fileList.length == 0) {
					return this.$toast('请上传图片!')
				}
			} else {
				if (!this.data.HiddenDangerDesc) {
					return this.$toast('请填写隐患描述')
				}
				if (!this.data.LGDName) {
					return this.$toast('请填写隐患分类')
				}
				if (!this.data.CorrectiveDeptName) {
					return this.$toast('请选择整改部门/人')
				}
				if (this.data.IsMustSubCorrectiveDate) {
					if (!this.data.CorrectiveDate) {
						return this.$toast('请选择整改期限')
					}
				}
			}

			this.loading = true
			let form = {
				ID: this.data.ID,
				OriginType: 3,
				CompanyCode: this.CompanyCode,
				IsAssignedArea: this.data.IsAssignedArea,
				HiddenDangerDesc: this.data.HiddenDangerDesc,
				CorrectiveAdvise: this.data.CorrectiveAdvise,
				HiddenDangerArea: this.data.HiddenDangerArea,
				HiddenDangerAreaType: this.data.HiddenDangerAreaType,
				HiddenDangerAreaCode: this.data.HiddenDangerAreaCode,
				Attachs: this.fileList.join(';'),
				HiddenDangerType: this.data.HiddenDangerType,
				LegalLiability: this.data.LegalLiability,
				OriginalText: this.data.OriginalText,
				LGCode: this.data.LGCode,
				LGDCode: this.data.LGDCode,
				LGDName: getCaption(this.data.LGDName),
				LGDType: this.data.LGDType,
				CorrectiveUserName: this.data.CorrectiveUserName,
				CorrectiveChnName: this.data.CorrectiveChnName,
				CorrectiveDeptCode: this.data.CorrectiveDeptCode,
				CorrectiveDeptName: this.data.CorrectiveDeptName,
				GistSource: this.data.GistSource,
				CorrectiveDate: this.data.CorrectiveDate,
				Submit: Confirm,
			}
			// 检查任务详情
			if (this.ctCode) {
				form.CTCode = this.ctCode
				form.CompanyCode = this.data.CompanyCode
			}
			let newform = deepClone(form)
			SnapShotAdd(form, Confirm)
				.then((res) => {
					console.log(res, 'res')

					this.loading = false
					if (info == 'info') {
						this.fileList = []
						this.data = {}
						this.data.ID = newform.ID
						// this.data.HiddenDangerArea = newform.HiddenDangerArea
						this.$set(this.data, 'HiddenDangerArea', newform.HiddenDangerArea)
						this.data.HiddenDangerAreaType = newform.HiddenDangerAreaType
						this.data.HiddenDangerAreaCode = newform.HiddenDangerAreaCode
						this.data.HiddenDangerType = '1'
						this.$set(this.data, 'CorrectiveDate', newform.CorrectiveDate)
						//this.data.CorrectiveDate = newform.CorrectiveDate
						return
					}
					setTimeout(() => {
						this.$router.push('/SytechDanger/Danger')
					}, 500)
				})
				.catch((err) => {
					console.log('err', err)
				})
		},

		// 一周
		getOneWeek() {
			var timestamp = new Date().getTime()
			var nowTime = 7 * 24 * 3600 * 1000
			var date = parseInt(nowTime + timestamp)

			let newTime = getTime(date)
			this.$set(this.data, 'CorrectiveDate', newTime)
			// this.data.CorrectiveDate = getTime(date)
		},
		// 两周
		getTwoWeek() {
			var timestamp = new Date().getTime()
			var nowTime = 14 * 24 * 3600 * 1000
			var date = parseInt(nowTime + timestamp)
			console.log('adasdasdsad', date)
			let newTime = getTime(date)
			this.$set(this.data, 'CorrectiveDate', newTime)
			console.log('<<<<<<<<<<<', this.data.CorrectiveDate)
			// this.data.CorrectiveDate = getTime(date)
		},
		getOneMounth() {
			var timestamp = new Date().getTime()
			var nowTime = 30 * 24 * 3600 * 1000
			var date = parseInt(nowTime + timestamp)
			console.log('adasdasdsad', date)
			let newTime = getTime(date)
			this.$set(this.data, 'CorrectiveDate', newTime)
			console.log('<<<<<<<<<<<', this.data.CorrectiveDate)
			// this.data.CorrectiveDate = getTime(date)
		},

		// 选择隐患区域
		_goHiddenDangerArea() {
			
			this.showPopup = true
		},
		// 选择隐患区域回调
		_chooseDangerArea(item) {
			console.log(item, 'item')
			if (item) {
				this.$set(this.data, 'HiddenDangerArea', item.AreaName)
				this.data.HiddenDangerAreaCode = item.AreaCode
				this.showPopup = false
			}
		},
		// 隐患分类
		_goDangerType() {
			
			this.DangerTypeShow = true
		},
		// 隐患分类回调
		_chooseDangerType(item, type) {
			if (item) {
				this.data.LGDCode = item.DCode
				this.$set(this.data, 'LGDName', type + '>' + item.DName)
				this.data.LGDType = item.DType
				this.DangerTypeShow = false
			}
		},
		// 选择部门、人
		_goCheckTaskPeople(backpath) {
			
			this.DepartmentTypeShow = true
		},
		// 选择部门人回调
		_chooseDepartment(item) {
			if (item) {
				this.$set(this.data, 'CorrectiveDeptName', item.OrgName)
				this.data.CorrectiveDeptCode = item.OrgCode
				// this.data.CorrectiveChnName = this.$route.params.item.ChnName || ''
				this.$set(this.data, 'CorrectiveChnName', item.ChnName || '')
				this.data.CorrectiveUserName = item.UserName || ''
				this.DepartmentTypeShow = false
			}
		},
		// 检查依据
		_goClassifys() {
			
			this.ClassifysShow = true
			this.isShow = false
		},

		// 选择检查依据
		_chooseClassifys(classifysData, isShow) {
			// 依据库
			if (classifysData) {
				let typename = classifysData.DType == 1 ? '基础管理' : '现场管理'

				// this.data.CorrectiveAdvise = this.$route.params.classifysData.CorrectiveAdvise

				this.$set(this.data, 'CorrectiveAdvise', classifysData.CorrectiveAdvise)

				this.data.HiddenDangerType = classifysData.HiddenDangerType
				// this.data.LGDName =
				// 	typename + '>' + this.$route.params.classifysData.DName
				this.$set(this.data, 'LGDName', typename + '>' + classifysData.DName)
				this.data.LGCode = classifysData.LGCode
				//this.data.CorrectiveDeptName = this.$route.params.classifysData.DName;
				// this.data.GistSource = this.$route.params.classifysData.GistSource
				this.$set(this.data, 'GistSource', classifysData.GistSource)
				this.data.OriginalText = classifysData.OriginalText
				this.data.LegalLiability = classifysData.LegalLiability
				if (!this.data.HiddenDangerDesc) {
					// this.data.HiddenDangerDesc = this.$route.params.classifysData.HiddenDangerDesc
					this.$set(
						this.data,
						'HiddenDangerDesc',
						classifysData.HiddenDangerDesc
					)
				} else {
					Dialog.confirm({
						confirmButtonText: '覆盖',
						cancelButtonText: '不覆盖',
						message: '当前已经输入隐患描述，是否覆盖?',
					})
						.then(() => {
							// on confirm
							this.$set(
								this.data,
								'HiddenDangerDesc',
								classifysData.HiddenDangerDesc
							)
							// this.data.HiddenDangerDesc = this.$route.params.classifysData.HiddenDangerDesc
						})
						.catch(() => {
							// on cancel
						})
				}
				this.ClassifysShow = false
			}
			if (isShow) {
				this.isShow = true
			} else {
				this.isShow = false
			}
		},
	},
}
</script>

<style lang="less" scoped>
.upload-hd {
	display: flex;
	padding: 10px;
	.upload-img,
	.imgs {
		position: relative;
		width: 60px;
		height: 60px;
	}
	.delImg {
		position: absolute;
		top: -5px;
		right: -5px;
		width: 16px;
		height: 16px;
		img {
			width: 100%;
			height: 100%;
		}
	}
}

.check-task {
	background-color: #e8f1f8;
	padding-bottom: 20px;
}
.problem {
	margin-bottom: 10px;
}
.bottom-btns {
	margin-top: 10px;
	padding: 0 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.submit-btn {
		width: 48%;
		height: 35px;
		font-size: 14px;
	}
	.delete-btn {
		width: 100%;
		height: 35px;
		font-size: 14px;
	}
}
.warning {
	background-color: #fff;
	padding: 10px;
	font-size: 10px;
}

.det_tab_item {
	padding: 10px 0;
	background-color: #fff;
	border-radius: 5px;
	margin-bottom: 10px;

	.det_tab_item_text {
		padding: 0 10px;
	}
}
.operate_det {
	background-color: #fff;
	padding: 10px;
	.operate_list {
		font-size: 12px;
		border: 1px solid #e8f1f8;
		.operate_row_first {
			padding: 10px;
			background-color: #e8f1f8;
			border-bottom: 1px solid #e8f1f8;
			margin-bottom: 10px;
		}
		.operate_row {
			padding: 10px;
			border-bottom: 1px solid #e8f1f8;
			/*margin-bottom: 10px;*/
		}
	}
}
.week {
	color: rgb(0, 195, 224);
}
</style>
